<template>
  <div>
  <el-row>
    <el-col :span="6">
      <div style="width: 100%; height: 500px;background-color: aqua" ><img style="width: 100%" src="@/assets/logo.png"></div>
    </el-col>
    <el-col :span="6">
      <div style="width: 100%; height: 500px;background-color: red" ><img style="width: 100%" src="@/assets/logo.png"></div>
    </el-col>
    <el-col :span="6">
      <div style="width: 100%; height: 500px;background-color: aqua" ><img style="width: 100%" src="@/assets/logo.png"></div>
    </el-col>
    <el-col :span="6">
      <div style="width: 100%; height: 500px;background-color: red" ><img style="width: 100%" src="@/assets/logo.png"></div>
    </el-col>
    <el-col>
      <button>按钮</button>
      <el-button>Element独特的按钮</el-button>
      <el-button type="primary">主要的按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="success">成功的按钮</el-button>
      <el-button>默认的按钮</el-button>

      <el-button  plain>Element独特的按钮</el-button>
      <el-button type="primary" plain>主要的按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="success" plain>成功的按钮</el-button>
      <el-button plain>默认的按钮</el-button>

      <el-button plain round>Element独特的按钮</el-button>
      <el-button type="primary" plain round>主要的按钮</el-button>
      <el-button type="danger" plain round>危险按钮</el-button>
      <el-button type="warning" plain round>警告按钮</el-button>
      <el-button type="info" plain round>信息按钮</el-button>
      <el-button type="success" plain round>成功的按钮</el-button>
      <el-button plain round>默认的按钮</el-button>

      <el-button circle icon="el-icon-edit" type="primary"></el-button>
      <el-button circle icon="el-icon-delete" type="danger"></el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>
      <el-input type="textarea" style="width: 200px" v-model="value1"></el-input>

      <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>

      <el-input style="width: 200px" v-model="value2" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
      <el-input clearable style="width: 200px" v-model="value3" placeholder="请输入内容" suffix-icon="el-icon-user"></el-input>
    </el-col>
  </el-row>
  <el-row>
    <el-autocomplete style="width: 300px" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" v-model="value4"></el-autocomplete>
  </el-row>
    <el-row>
      <el-select v-model="select" @change="changeSelect">
        <el-option value="香蕉"></el-option>
        <el-option value="菠萝"></el-option>
        <el-option value="橘子"></el-option>
      </el-select>

      <el-select v-model="select1" @change="changeSelect" multiple>
        <el-option v-for="item in fruits" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select v-model="select2" @change="changeSelectUser" filterable>
        <el-option v-for="item in users" :key="item.card" :label="item.label" :value="item.card"></el-option>
      </el-select>
    </el-row>
    <el-row>
      <el-radio-group v-model="radio" @change="changeradio">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-row>
    <el-row>
      <el-checkbox-group v-model="checkboxList" @change="changecheckboxList">
        <el-checkbox label="111"></el-checkbox>
        <el-checkbox label="222"></el-checkbox>
        <el-checkbox label="333"></el-checkbox>
      </el-checkbox-group>
      <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
      <el-date-picker v-model="datetime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="changeDatetime" ></el-date-picker>

      <el-date-picker v-model="daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDateRange"></el-date-picker>

      <el-row style="margin: 200px 0;">
        <el-table :data="tableData" border :header-cell-style="{ background:'#f5f7fa',color:'#606266'}">
          <el-table-column align="center" label="名称" prop="name"></el-table-column>
          <el-table-column align="center" label="年龄" prop="age"></el-table-column>
          <el-table-column align="center" label="性别" prop="sex"></el-table-column>
          <el-table-column align="center" label="地址" prop="address"></el-table-column>
          <el-table-column align="center" label="时间" prop="time"></el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="scope">
              <el-button align="center" type="primary" @click="edit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-row>
    </el-row>
  </div>
</template>
<script>
import ro from "element-ui/src/locale/lang/ro";
export default {
  name:'Element',
  data(){
    return{
      tableData:[
        {name:'张三',age:18,sex:'男',address:'北京',time:'2021-01-01 12:00:00'}
      ],
      value:'',
      value1:'',
      password:'',
      value3:'',
      value2:'',
      value4:'',
      coffees:[{ value: '1美式咖啡'},{ value: '2拿铁咖啡'},{ value: '3卡布奇诺'},{ value: '4摩卡咖啡'},{ value: '5焦糖玛奇朵'},{ value: '6瑞纳冰'}],
      select:'',
      select1:'',
      select2:'',
      fruits:[{id:1,name:'香蕉'},{id:2,name:'菠萝'},{id:3,name:'橘子'}],
      users:[{card:'123456789',label:'张三'},{card:'987654321',label:'李四'},{card:'111111111',label:'王五'}],
      radio:'',
      checkboxList:[],
      date:'',
      datetime:'',
      daterange:[]
    }
  },
  methods:{
    edit(row){
      // alert(row.name);
      // this.$message.success(row.name);
      // this.$notify.success(row.name);
      // this.$notify.warning(row.name);
      this.$confirm("Are you OK?","提示",{
        confirmButtonText:'OK',
        cancelButtonText:'Cancel',
        type:'warning'
        //confirmButtonText：确认按钮的文本内容，设置为 'OK' 表示确认按钮上将显示 'OK'
        //cancelButtonText：取消按钮的文本内容，设置为 'Cancel' 表示取消按钮上将显示 'Cancel'
        //type：提示框的类型，设置为 'warning' 表示提示框上显示一个黄色感叹号图标
      }).then(()=>{
        this.$message.success('OK');

      }).catch(()=>{
        this.$message.warning('NO');
      })
    },
    querySearch(query,cb) {
      let results= query ? this.coffees.filter(v=>v.value.includes(query)):this.coffees //v是数组里面的每一项
      cb(results)
    },
    changeSelect(){
      console.log(this.select1)
    },
    changeSelectUser(){
        console.log(this.select2)
    },
    changeradio(){
      console.log(this.radio)
    },
    changecheckboxList(){
      console.log(this.checkboxList)
    },
    changeDate(){
      console.log(this.date)
    },
    changeDatetime(){
      console.log(this.datetime)
    },
    changeDateRange(){
      console.log(this.daterange)
    }
  }
}
</script>